/* * 远程字典下拉框、单选框组、多选框组封装组件 */
<template>
  <div class="DictionariesSelect">
    <div v-if="showType === 0">
      <el-select
        :size="size"
        v-model="modelData"
        :style="inputWidth ? 'width:' + inputWidth + 'px' : ''"
        @change="handleSelect"
        :placeholder="placeholder"
        :disabled="disabled"
        :clearable="clearable"
        :filterable="filterable"
        @clear="handleClear"
      >
        <!-- 字典数组的value是string类型 外传modelData为number就要转化为number -->
        <el-option
          v-for="(item, index) in selectArr"
          :key="index"
          :label="item.label"
          :value="
            typeof modelData == 'string' ? item.value : Number(item.value)
          "
        ></el-option>
      </el-select>
    </div>
    <div v-if="showType === 1">
      <el-radio-group
        v-model="modelData"
        :size="size"
        @change="handleSelect"
        :disabled="disabled"
      >
        <el-radio
          :class="radioType === 1 ? 'tick' : ''"
          v-for="(item, index) in selectArr"
          :key="index"
          :label="
            typeof modelData == 'string' ? item.value : Number(item.value)
          "
        >
          {{ item.label }}
        </el-radio>
      </el-radio-group>
    </div>
    <div v-if="showType === 2">
      <el-checkbox-group
        v-model="modelData"
        :size="size"
        @change="handleSelect"
        :disabled="disabled"
      >
        <el-checkbox
          v-for="(item, index) in selectArr"
          :key="index"
          :label="
            typeof modelData == 'string' ? item.value : Number(item.value)
          "
        >
          {{ item.label }}
        </el-checkbox>
      </el-checkbox-group>
    </div>
    <slot name="tail"></slot>
  </div>
</template>

<script>
export default {
  props: {
    // 远程字典元素类型 0 下拉框 1 单选框组 2 多选框组
    showType: {
      type: Number,
      default: 0,
      require: true,
    },
    // 单选框组样式 0 默认 1 对勾
    radioType: {
      type: Number,
      default: 0,
      require: false,
    },
    // 选择传输的数据的数据类型 0 String 1 Number
    valueType: {
      type: Number,
      default: 0,
      require: false,
    },
    // v-model
    datas: {
      type: [String, Number],
      default: "",
      require: false,
    },
    // 对应表单字段-通用处理-可通过handleSelect操作在父级进行对应表单字段的赋值
    modelBinding: {
      type: String,
      default: "",
      require: false,
    },
    // 远程字典集合，每个集合子级格式为{label:...,value:...,...}
    selectArr: {
      type: Array,
      default: [],
      require: true,
    },
    size: {
      type: String,
      default: "small",
      require: false,
    },
    // 框体长度-showType=0的时候生效
    inputWidth: {
      type: Number,
      require: false,
    },
    placeholder: {
      type: String,
      default: "请选择",
      require: false,
    },
    disabled: {
      type: Boolean,
      default: false,
      require: false,
    },
    clearable: {
      type: Boolean,
      default: false,
      require: false,
    },
    filterable: {
      type: Boolean,
      default: false,
      require: false,
    },
    // showType 为 1或 2 时是否需要默认选中
    needDefault: {
      type: Boolean,
      default: true,
      require: false,
    },
  },
  data() {
    return {
      modelData: null,
    };
  },
  watch: {
    datas: {
      handler(val) {
        if (val || val === 0) {
          this.modelData = this.datas;
        } else {
          setTimeout(() => {
            this.defaultSelectChose();
          }, 500);
        }
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    // 默认选择第一个
    defaultSelectChose() {
      if (this.showType == 1 || this.showType == 2) {
        if (this.selectArr.length > 0) {
          // 需要默认渲染且没有传入值（不是修改）
          if (this.needDefault && !this.datas) {
            this.modelData = this.selectArr[0].value;
            // this.$emit内参数按顺序分别是 抛出事件名称,数据,绑定的form字段，触发事件抛出类型（0：默认绑定事件；1：普通选择事件）
            this.$emit(
              "handleSelect",
              this.valueTypeDeal(this.modelData),
              this.modelBinding,
              "0"
            );
          }
        }
      } else if (this.showType === 0) {
        this.modelData = this.datas;
      }
    },
    handleSelect(val) {
      // this.$emit内参数按顺序分别是 抛出事件名称,数据,绑定的form字段，触发事件抛出类型（0：默认绑定事件；1：普通选择事件）
      this.$emit(
        "handleSelect",
        this.valueTypeDeal(val),
        this.modelBinding,
        "1"
      );
    },
    handleClear(val) {
      if (this.clearable) {
        this.$emit("handleClear", this.modelBinding);
      }
    },
    valueTypeDeal(val) {
      if (this.valueType === 0) {
        if (typeof val == "string") {
          val = val;
        } else {
          val = val.toString();
        }
        return val;
      } else if (this.valueType === 1) {
        return Number(val);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.DictionariesSelect {
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
  .tick {
    ::v-deep .el-radio__inner {
      border-radius: 50%;
    }

    ::v-deep .el-radio__input.is-checked .el-radio__inner::after {
      content: "";
      width: 10px;
      height: 5px;
      border: 1px solid white;
      border-top: transparent;
      border-right: transparent;
      text-align: center;
      display: block;
      position: absolute;
      top: 2px;
      left: 0px;
      vertical-align: middle;
      transform: rotate(-45deg);
      border-radius: 0px;
      background: none;
    }
  }
}
</style>
